<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="header-left" :style="{ marginTop: safeTop + 'px' }" @click="goToBack">
				<image src="/static/base/back.svg" class="menu-icon" mode="aspectFit" />
			</view>
			<view class="header-title" :style="{ marginTop: safeTop + 'px' }">关注列表</view>
			<view class="header-right"></view>
		</view>

		<!-- 搜索框 -->
		<view class="search-box" :style="{ top: searchTop + 'px' }">
			<input
				v-model="searchKeyword"
				placeholder="输入名称搜索"
				class="search-input"
				@input="handleSearch"
			/>
			<image src="/static/base/seach.svg" class="search-icon" mode="aspectFit" />
		</view>

		<!-- 粉丝列表 -->
		<view class="content">
			<view :style="{ height: contentTop + 'px' }"></view>
			<view v-if="loading" class="loading">加载中...</view>
			<view v-else-if="filteredFansList.length === 0" class="no-data">暂无数据</view>
			<view v-for="(item, index) in filteredFansList" :key="item.uid" class="fan-item">
				<view class="fan-info" @click="goToUserPage(item.uid)">
					<image :src="item.avatar" class="avatar" mode="aspectFill" />
					<view class="text-info">
						<view class="name">{{ item.nickname }}</view>
						<view class="meta">
							<text class="meta-item">粉丝数：{{ formatFansCount(item.fans_count) }}</text>
							<text class="meta-item">{{ item.identity }}</text>
						</view>
						<view class="intro">{{ item.signature || '暂无简介' }}</view>
					</view>
				</view>
				<view
					class="follow-btn"
					:class="{ followed: item.userFollow }"
					@click.stop="toggleFollow(item, index)"
				>
					{{ item.userFollow ? '已关注' : '关注' }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getFollowList } from '@/api/base/designer.js'
import { followUser, cancelFollowUser } from '@/api/base/index.js'

export default {
	data() {
		return {
			safeTop: 0,
			searchTop: 0,
			contentTop: 0,
			loading: true,
			originalFansList: [], // 原始完整列表
			searchKeyword: '',
			uid: 0, // 当前查看的用户ID，0 表示自己
			identity: 0 // 身份筛选：0=全部，1=创作者，2=设计师
		}
	},

	computed: {
		// 搜索过滤后的列表
		filteredFansList() {
			if (!this.searchKeyword.trim()) {
				return this.originalFansList
			}
			const keyword = this.searchKeyword.toLowerCase()
			return this.originalFansList.filter(item =>
				item.nickname.toLowerCase().includes(keyword)
			)
		}
	},

	onLoad(options) {
		const { barTop } = this.$util.getWXStatusHeight()
		this.safeTop = barTop
		this.searchTop = barTop + 38
		this.contentTop = barTop + 83

		// 可从路由参数获取 uid（如查看他人关注列表）
		this.uid = options.uid ? parseInt(options.uid) : 0
		this.identity = options.identity ? parseInt(options.identity) : 0

		this.fetchFollowList()
	},

	methods: {
		async fetchFollowList() {
			this.loading = true
			try {
				const res = await getFollowList(this.uid, this.identity, 1, 100) // page=1, limit=100（可按需调整）
				if (res.status === 200) {
					// 接口返回的 userFollow 字段直接表示是否已关注
					this.originalFansList = res.data.list || []
				} else {
					uni.showToast({ title: res.msg || '获取失败', icon: 'none' })
				}
			} catch (error) {
				console.error('获取关注列表失败:', error)
				uni.showToast({ title: '网络错误', icon: 'none' })
			} finally {
				this.loading = false
			}
		},

		async toggleFollow(item, index) {
			const userId = item.uid
			const isFollowing = item.userFollow

			try {
				if (isFollowing) {
					await cancelFollowUser(userId)
					uni.showToast({ title: '已取消关注', icon: 'none' })
				} else {
					await followUser(userId)
					uni.showToast({ title: '关注成功', icon: 'none' })
				}

				// 更新本地状态
				this.$set(this.originalFansList[index], 'userFollow', !isFollowing)
			} catch (error) {
				console.error('操作失败:', error)
				uni.showToast({ title: '操作失败，请重试', icon: 'none' })
				// 恢复状态
				this.$set(this.originalFansList[index], 'userFollow', isFollowing)
			}
		},

		handleSearch() {
			// 搜索已在 computed 中处理，此处可留空或做防抖
		},

		goToUserPage(uid) {
			// 跳转到用户主页，携带 uid
			uni.navigateTo({
				url: `/pages/sub_base/designer-profile/index?uid=${uid}`
			})
		},

		goToBack() {
			uni.navigateBack()
		},

		// 格式化粉丝数（如 10000 → 1万）
		formatFansCount(count) {
			if (count >= 10000) {
				return (count / 10000).toFixed(1) + '万'
			}
			return count.toString()
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	background-color: #f2f8fc;
}

.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 27.76rpx;
	z-index: 100;
}

.header-left {
	width: 76.34rpx;
	height: 76.34rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-title {
	font-size: 31.23rpx;
	font-weight: 600;
	color: #333333;
}

.header-right {
	width: 80rpx;
}

.menu-icon {
	width: 48rpx;
	height: 48rpx;
}

.search-box {
	width: 100%;
	position: fixed;
	background: #fff;
	display: flex;
	padding: 7px 14px;
	z-index: 999;
}

.search-input {
	flex: 1;
	height: 32px;
	background-color: #f2f8fc;
	padding: 0 40px 0 40px;
	border-radius: 16px;
	font-size: 28rpx;
}

.search-icon {
	position: absolute;
	top: 14px;
	left: 28px;
	width: 20px;
	height: 20px;
}

.content {
	padding-top: 10rpx;
}

.loading,
.no-data {
	text-align: center;
	padding: 40rpx;
	color: #999;
}

.fan-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 20rpx;
	border-bottom: 1rpx solid #d2d2d2;
}

.fan-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	margin-right: 20rpx;
}

.text-info {
	line-height: 1.5;
	flex: 1;
}

.name {
	font-weight: bold;
	font-size: 32rpx;
	color: #333;
}

.meta {
	display: flex;
	margin-top: 8rpx;
}

.meta-item {
	font-size: 24rpx;
	color: #999;
	background: #f0f0f0;
	padding: 2rpx 10rpx;
	border-radius: 10rpx;
	margin-right: 10rpx;
}

.intro {
	font-size: 26rpx;
	color: #666;
	margin-top: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.follow-btn {
	width: 140rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background-color: #000;
	color: #fff;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-left: 20rpx;
}

.followed {
	background-color: #fff;
	color: #999;
	border: 1rpx solid #ccc;
}
</style>